<template>
  <section>
    <span>{{ totalFee }} </span>
    <el-popover v-if="quotationId"
                placement="right-start"
                width="200"
                trigger="click"
                @show="handleShow">
      <div class="contentSty">
        <el-button type="text"
                   class="cost-title"
                   @click="onJump">运费明细</el-button>
        <i class="el-icon-arrow-right"></i>
        <template v-for="(item, i) in priceList">
          <div :key="`${item.type}` + i"
               class="cost-list">
            <span>{{ item.typeName }}</span> <span>{{ item.price ? thousandDigit(item.price, 2) : 0 }} </span>
          </div>
        </template>
        <div v-if="surchargeFees.length > 0"
             class="f12 mb10 pt10">
          补充费用
        </div>
        <template v-for="(ele, index) in surchargeFees">
          <div :key="`${ele.type}` + index"
               class="cost-list">
            <span>{{ ele.typeName }}</span> <span>{{ ele.money ? thousandDigit(ele.money, 2) : 0 }} </span>
          </div>
        </template>
        <div class="divider-line-solid"></div>
        <div class="cost-list">
          <span>合计</span> <b class="totalSty">{{ totalPrice }}</b>
        </div>
      </div>
      <icon-svg v-if="quotationId"
                slot="reference"
                class="font-style pointer"
                class-name="iconClass"
                icon-name="tishi1" />
    </el-popover>
  </section>
</template>

<script>
import { quotation } from "@/api/index";
import { returnThousandDigit } from "@/libs/util.js";
export default {
  name: "Freight",
  props: {
    value: {
      type: [String, Number]
    },
    quotationId: {
      type: Number,
      default: () => null
    },
    row: {
      type: Object,
      default: () => { }
    },
    url: {
      type: String,
      default: () => null
    }
  },
  data () {
    return {
      priceList: [],
      surchargeFees: [],
      totalFee: 0,
      totalPrice: 0
    };
  },
  computed: {
    values () {
      return this.value
    }
  },
  watch: {
    values: {
      handler (value) {
        this.totalFee = value && value != 0 ? returnThousandDigit(value, 2) : 0;
      }
    },
    immediate: true
  },
  created () {
    this.totalFee = this.values && this.values != 0 ? returnThousandDigit(this.values, 2) : 0;
  },
  methods: {
    async getPrice () {
      let { data } = await quotation.getPrice(this.quotationId);
      const { surchargeFees, totalFee } = data;

      let arr = [];
      if (data?.minimumFee) {
        arr.push({ typeName: "最低费用", price: data.minimumFee });
      } else {
        if (this.row.transportMode === 1) {
          arr.push({ typeName: "零担费", price: data.transportFee });
        } else {
          arr.push({ typeName: `${this.url === 'oneBillQuote' ? '合单运费' : '整车费'}`, price: data.transportFee || 0 });
        }
        if (data.pickFee)
          arr.push({ typeName: "提货费", price: data.pickFee || 0 });
        if (data.deliverFee)
          arr.push({ typeName: "送货费", price: data.deliverFee });
        if (data.loadFee)
          arr.push({ typeName: "装货费", price: data.loadFee || 0 });
        if (data.unloadFee)
          arr.push({ typeName: "卸货费", price: data.unloadFee || 0 });
      }
      if (data.insureFee)
        arr.push({ typeName: "保险费", price: data.insureFee || 0 });
      if (data?.taxFee)
        arr.push({ typeName: "税费", price: data.taxFee || 0 });
      this.priceList = arr;
      this.surchargeFees = surchargeFees || [];
      this.totalPrice = totalFee == 0 ? 0 : returnThousandDigit(totalFee, 2);
    },
    thousandDigit (value, digit) {
      return returnThousandDigit(value, digit)
    },
    handleShow () {
      if (this.quotationId) {
        this.getPrice();
      }
    },
    onJump () {
      if ([32, 14].includes(this.row.status)) {
        const { href } = this.$router.resolve({
          name: this.url || `quoteDetailWindow`,
          query: {
            quotationId: this.row.quotationId,
            waybillId: this.row.waybillId,
            combineId: this.row.combineId,
            status: this.row.status,
            subjectId: this.row.subjectId,
            surcharge: this.row?.surcharge,
          }
        });
        window.open(href, "_blank");
      } else {
        this.$router.push({
          name: this.url || `quoteDetail`,
          query: {
            quotationId: this.row.quotationId,
            waybillId: this.row.waybillId,
            combineId: this.row.combineId,
            status: this.row.status,
            subjectId: this.row.subjectId,
            surcharge: this.row?.surcharge,
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.cost-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--prev-color-text-ashes);
  > span {
    // align-items: ;
  }
}
.cost-title {
  // font-size: 14px;
  color: #000;
  margin-bottom: 10px;
}
.totalSty {
  color: var(--prev-color-primary);
  font-size: 14px;
  font-weight: bold;
}
.contentSty {
  max-height: 270px;
  overflow-x: hidden;
  padding: 0 15px;
}
</style>
